<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>上传文件</title>
    <script type="text/javascript" th:src="@{/js/jquery-2.2.4.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/DomTools.js}"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
<div align="center">
    <font color="red"><h3 th:text="${'欢迎你！[' + #request.getSession().getAttribute('user').realname+']'}"
                          th:if="${#request.getSession().getAttribute('user')!=null}"></h3></font>
    <hr>
    <h2>云端资源展示</h2>
    <table border="1">
        <tr>
            <th>标题</th>
            <th>展示优先级</th>
            <th>发布时间</th>
            <th>文件路径</th>
            <th>发布者</th>
            <th>操作</th>
        </tr>
        <tr th:each="notice:${notices}">
            <td th:text="${notice.title}"></td>
            <td th:text="${notice.priority}"></td>
            <td th:text="${notice.postTime}"></td>
            <td th:text="${notice.path}"></td>
            <td th:text="${notice.tenderer}"></td>
            <td>
                <a th:href="'javascript:delFile(\''+${notice.id}+'\')'">删除</a>
            </td>
        </tr>
    </table>
    <hr>
    <h2>上传文件</h2>
    <table th:border="1">
        <tr>
            <th colspan="2">使用FormData上传文件</th>
        </tr>
        <tr>
            <th>请选择文件</th>
            <form id="tf0" enctype="multipart/form-data">
                <th><input type="file" name="upfile"></th>
            </form>
            <!--@RequestParam("upfile") MultipartFile uploadFile,-->
        </tr>
        <tr>
            <td>标题</td>
            <td><input type="text" id="title" style="width:250px;text-align:center;border:none;" placeholder="请输入标题">
            </td>
        </tr>
        <tr>
            <td>展示优先级</td>
            <td>
                <input id="priority" style="width:250px;text-align:center;" type="number" value="1"/>
            </td>
        </tr>
        <tr align="center">
            <td colspan="2"><input type="button" value="Click Here to Upload file from local to Server"
                                   onclick="test(0)"></td>
        </tr>
    </table>

</div>
<script>
    function test(a) {
        var formd = new FormData(getid('tf' + a));
        formd.append('title', $('#title').val());
        formd.append('priority', $('#priority').val());
        $.ajax({
            xhrFields: {
                withCredentials: true
            },
            url: 'file1', // 请求的URL
            type: "POST", // 请求方式
            data: formd, // 提交的数据<上面我声明的对象>
            async: true, // 是否为异步请求
            dataType: "json", // 返回格式为json
            cache: false,
            processData: false, // 不加会报错
            contentType: false, // 不加会报错
            success: function (data) {
                if (data.statusCode == 1) {
                    window.location = '../user/logged';
                } else {
                    alert(data.msg);
                }
            },
            error: function (err) {
                alert("服务器繁忙");
            }
        });
    }

    // <a th:href="@{'deleUser/'+${user.id}}">删除</a>
    function delFile(id) {
        alert(id);
        $.ajax({
            xhrFields: {
                withCredentials: true
            },
            url: 'filedel/' + id,
            type: "DELETE",
            async: true,
            dataType: "json",
            cache: false,
            processData: false, // 不加会报错
            contentType: false, // 不加会报错
            success: function (data) {
                if (data.statusCode == 1) {
                    window.location = '../user/logged';
                } else {
                    alert(data.msg);
                }
            },
            error: function (err) {
                alert("服务器繁忙");
            }
        });
    }
</script>
</body>
</html>
